﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>一张图指挥</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./fonts/onephoto/iconfont.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/com_table.css">
    <link rel="stylesheet" href="./css/onePhoto.css">

    <!--[if lt IE 9]>
      <script src="./lib/ie9/html5.min.js"></script>
      <script src="./lib/ie9/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:;">监控管理</a>
            <a href="javascript:;">一张图指挥</a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <!-- 头部 -->
    <div class="layui-layout head_bg">
        <div class="nav_wrap clearfix" id="navWrap">
            <ul class="listW fl" id="chooseTab">
                <!-- 监控任务 -->
                <li class="" id="firstLi">
                    <span class="comIcon icon_1 active"></span>
                </li>
                <!-- 巡检任务 -->
                <li class="">
                    <span class="comIcon icon_2 "></span>
                </li>
                <!-- 设备管理 -->
                <li class="">
                    <span class="comIcon icon_3 "></span>
                </li>
                <!-- 单位档案 -->
                <li class="">
                    <span class="comIcon icon_4 "></span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 联网企业分布一张图 -->
    <div class="containerMain comLianWang lianwangBg">
        <!-- 联网企业名称 -->
        <div class="containerfl">
            <div class="searchBtn">
                <input type="text" placeholder="联网企业名称">
                <img src="./images/jk_data/search2.png" alt="">
            </div>

            <!-- 菜单 -->
            <div class="layui-form-item">

                <div class="layui-input-inline">
                    <div id="treeW"></div>
                </div>
            </div>
        </div>
        <div class="containCenter">
            <!-- 联网单位分布 -->
            <!-- <div class="networkW clearfix">
                <div class="networkCont">
                    <div class="fl">
                        <h4>高危单位</h4>
                        <div class="newwork_nums">
                            <span>358455</span>
                            <em>座</em>
                        </div>
                    </div>
                    <div class="fr">
                        <h4>重点单位</h4>
                        <div class="newwork_nums">
                            <span>35845</span>
                            <em>座</em>
                        </div>
                    </div>
                </div>
                <div class="networkCont">
                    <div class="fl">
                        <h4>一般单位</h4>
                        <div class="newwork_nums">
                            <span>358455</span>
                            <em>座</em>
                        </div>
                    </div>
                    <div class="fr">
                        <h4>三小场所</h4>
                        <div class="newwork_nums">
                            <span>35845</span>
                            <em>座</em>
                        </div>
                    </div>
                </div>

            </div> -->

            <div class="newworkImg networkW">
                <img src="./images/index/tubiao.jpg" alt="">
            </div>
            <!-- 小块 -->
            <div class="smallSlice sheavy">
                <div class="heavy comsmallmsg">
                    重点单位：附属医院
                </div>
                <img src="./images/onephoto/heavy.png" alt="">
            </div>
            <img class="xfs xfs1" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs2" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs3" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs4" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs5" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs6" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs7" src="./images/onephoto/xiaofshang.png" alt="">
            <img class="xfs xfs8" src="./images/onephoto/xiaofshang.png" alt="">


            <div class="smallSlice sone" id="commonWrap">
                <div class="one comsmallmsg">
                    一般单位：铁建联创大厦
                </div>
                <img src="./images/onephoto/one.png" alt="">
            </div>
            <div class="smallSlice sone1" id="commonWrap">
                <div class="one comsmallmsg">
                    一般单位：附属医院
                </div>
                <img src="./images/onephoto/one.png" alt="">
            </div>

            <div class="smallSlice shigh">
                <div class="high comsmallmsg">
                    高危单位：烟厂厂区
                </div>
                <img src="./images/onephoto/high.png" alt="">
            </div>
            <div class="smallSlice shigh1">
                <div class="high comsmallmsg">
                    高危单位：烟厂库区
                </div>
                <img src="./images/onephoto/high.png" alt="">
            </div>
            <div class="smallSlice sthree">
                <div class="three comsmallmsg">
                    三小场所：中保大厦
                </div>
                <img src="./images/onephoto/three.png" alt="">
            </div>
            <div class="smallSlicesb">
                <img class="xiaofangsuan" src="./images/onephoto/xiaofshang.png" alt="">
                <span>沙袋：100个 </span>
                <span>救生衣：110套 </span>
                <span>灭火器：50个 </span>
                <span>喷水枪：20个 </span>
                <span>干粉灭火器：20个</span>
            </div>

        </div>

        <div class="containfr">
            <!-- 生成数据报表 -->
            <div class="scsjbb" id="scsjbb">

            </div>

            <!-- 建筑类型选择 -->
            <div class="jzWrap">
                <div class="clearfix jz_title">
                    <span class="fl">建筑类型</span>
                    <span class="fr">
                        <i class="iconfont icon-duoxuankuang iconAllJZ"></i>
                        <em>全选</em>
                    </span>
                </div>
                <div class="jz_content">
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>

                </div>
            </div>
            <!-- 消防物资选择 -->
            <div class="xfWrap">
                <div class="clearfix jz_title">
                    <span class="fl">消防物资</span>
                    <span class="fr">
                        <i class="iconfont icon-duoxuankuang iconAllXF"></i>
                        <em>全选</em>
                    </span>
                </div>
                <div class="xf_content">
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>

                </div>
            </div>


        </div>
        <!-- 背景图 -->
        <img src="./images/onephoto/lianwang_bg.png" alt="" class="lianwangImg">

        <!-- 数据统计生成 -->

        <div class="dataWrap">

            <img src="./images/onephoto/tongji_top.jpg" alt="" usemap="#Map7">
            <map name="Map7" id="Map7">
                <area shape="rect" coords="41,26,169,68" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="185,26,316,69" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="329,28,459,66" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="1139,29,1244,65" href="javascript:;" id="closeData" />
            </map>
            <div>
                <img src="./images/onephoto/yinfang.jpg" alt="" class="comDataImg comDataImgActive">
                <img src="./images/onephoto/dadui.jpg" alt="" class="comDataImg">
                <img src="./images/onephoto/quyutongji.jpg" alt="" class="comDataImg">
            </div>
        </div>
    </div>
    <!--防火防范 -->
    <div class="containerMain comLianWang fanghuoW">
        <!-- 联网企业名称 -->
        <div class="containerfl">
            <div class="searchBtn">
                <input type="text" placeholder="联网企业名称">
                <img src="./images/jk_data/search2.png" alt="">
            </div>

            <!-- 菜单 -->
            <div class="layui-form-item">

                <div class="layui-input-inline">
                    <div id="treeW2"></div>
                </div>
            </div>
        </div>
        <div class="containCenter">
            <!-- 联网单位分布 -->
            <!-- <div class="networkW clearfix">
                <div class="networkCont">
                    <div class="fl">
                        <h4>高危单位</h4>
                        <div class="newwork_nums">
                            <span>358455</span>
                            <em>座</em>
                        </div>
                    </div>
                    <div class="fr">
                        <h4>重点单位</h4>
                        <div class="newwork_nums">
                            <span>35845</span>
                            <em>座</em>
                        </div>
                    </div>
                </div>
                <div class="networkCont">
                    <div class="fl">
                        <h4>一般单位</h4>
                        <div class="newwork_nums">
                            <span>358455</span>
                            <em>座</em>
                        </div>
                    </div>
                    <div class="fr">
                        <h4>三小场所</h4>
                        <div class="newwork_nums">
                            <span>35845</span>
                            <em>座</em>
                        </div>
                    </div>
                </div>

            </div> -->
            <div class="newworkImg networkW">
                <img src="./images/index/tubiao.jpg" alt="">
            </div>
            <!-- 小块 -->
            <div class="smallSlice sheavy">
                <div class="heavy">
                    重点单位：张家口供电公司
                </div>
                <img src="./images/onephoto/heavy.png" alt="">
            </div>
            <div class="smallSlice sone">
                <div class="one">
                    一般单位：洪生加油站
                </div>
                <img src="./images/onephoto/one.png" alt="">
            </div>
            <div class="smallSlice shigh">
                <div class="high">
                    高危单位：燕京啤酒厂
                </div>
                <img src="./images/onephoto/high.png" alt="">
            </div>
            <div class="smallSlice sthree">
                <div class="three">
                    三小场所：维多利亚
                </div>
                <img src="./images/onephoto/three.png" alt="">
            </div>
            <div class="smallSlicesb">
                <span>沙袋：100个 </span>
                <span>救生衣：110套 </span>
                <span>灭火器：50个 </span>
                <span>喷水枪：20个 </span>
                <span>干粉灭火器：20个</span>
            </div>
        </div>

        <div class="containfr">
            <!-- 生成数据报表 -->
            <div class="scsjbb" id="scsjbb">

            </div>

            <!-- 建筑类型选择 -->
            <div class="jzWrap">
                <div class="clearfix jz_title">
                    <span class="fl">建筑类型</span>
                    <span class="fr">
                        <i class="iconfont icon-duoxuankuang iconAllJZ"></i>
                        <em>全选</em>
                    </span>
                </div>
                <div class="jz_content">
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>

                </div>
            </div>
            <!-- 消防物资选择 -->
            <div class="xfWrap">
                <div class="clearfix jz_title">
                    <span class="fl">消防物资</span>
                    <span class="fr">
                        <i class="iconfont icon-duoxuankuang iconAllXF"></i>
                        <em>全选</em>
                    </span>
                </div>
                <div class="xf_content">
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>
                    <div class="comContent fl">
                        <i class="icon iconfont icon-duoxuankuang"></i>
                        <span>工地</span>
                    </div>

                </div>
            </div>


        </div>
        <!-- 背景图 -->
        <img src="./images/onephoto/lianwang_bg.png" alt="" class="lianwangImg">
        <!-- 数据统计生成 -->

        <div class="dataWrap">

            <img src="./images/onephoto/tongji_top.jpg" alt="" usemap="#Map7">
            <map name="Map7" id="Map7">
                <area shape="rect" coords="41,26,169,68" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="185,26,316,69" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="329,28,459,66" href="javascript:;" class="dataBtn" />
                <area shape="rect" coords="1139,29,1244,65" href="javascript:;" id="closeData" />
            </map>
            <div>
                <img src="./images/onephoto/yinfang.jpg" alt="" class="comDataImg comDataImgActive">
                <img src="./images/onephoto/dadui.jpg" alt="" class="comDataImg">
                <img src="./images/onephoto/quyutongji.jpg" alt="" class="comDataImg">
            </div>
        </div>
    </div>
    <!--  设备分布一张图 -->
    <div class="containerMain2 comLianWang shebeiWrap">
        <!-- <div class="containerfl2">

            <div class="shuruOption">
                <input type="text" placeholder="行政区域/专家姓名：">
            </div>
            <table>
                <tr>
                    <th>专家姓名</th>
                    <th>手机号</th>
                    <th>负责区域数量</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>186666666520</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>186666666520</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>186666666520</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>186666666520</td>
                    <td>10</td>
                </tr>
            </table>
        </div> -->
        <input type="text" placeholder="行政区域，公司名" class="quyu">
        <div class="listBtn">
            <span class="sbBtn" id="shebeiBtn">设备列表</span>
            <div class="btnInline">
                <span>圆形</span>
                <span>矩形</span>
                <span>多边形</span>
            </div>
        </div>

        <!-- 消防栓出现的图片 -->
        <img src="./images/onephoto/xiaof_show.jpg" alt="" id="xiaofangShow" usemap="#Map6">
        <map name="Map6" id="Map6">
            <area shape="rect" coords="37,271,152,321" href="javascript:;" id="videoBtn" />
            <area shape="rect" coords="30,3,133,45" href="javascript:;" />
            <area shape="rect" coords="146,3,259,44" href="javascript:;" />
            <area shape="rect" coords="273,3,384,45" href="javascript:;" />
            <area shape="rect" coords="393,1,503,45" href="javascript:;" />
        </map>
        <!-- 点击视频出现的视频 -->
        <img src="./images/onephoto/videoshow.jpg" alt="" id="videoshow">
        <!-- 设备表格 -->
        <img src="./images/onephoto/z4_xflist.jpg" alt="" id="tableShow">
        <img src="./images/onephoto/sb2.jpg" alt="">

        <!-- 消防栓 -->
        <div class="xiaofangshan">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg1 comxfximg xiaofang">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg2 comxfximg xiaofang">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg3 comxfximg xiaofang">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg4 comxfximg xiaofang">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg5 comxfximg xiaofang">
            <img src="./images/onephoto/xfx.png" alt="" class="xfximg6 comxfximg xiaofang">
        </div>
        <!-- 调度任务 -->
    </div>

    <div class="containerMain2 comLianWang">
        <div class="comMap comMapActive" id="comMap_1">
            <img src="./images/onephoto/zj/zj_1.jpg" alt="" usemap="#Map21">
            <!-- <map name="Map21" id="Map21">
                
                <area shape="rect" coords="265,24,358,65"  href="javascript:;" class="map1"/>
                <area shape="rect" coords="365,19,447,65"  href="javascript:;" class="map2"/>
                <area shape="rect" coords="454,18,551,65" href="javascript:;" class="map3"/>
                <area shape="rect" coords="554,18,673,64" href="javascript:;" class="map4"/>
            </map> -->

            <div class="zjBtns">
                <img src="./images/onephoto/zj/zj_btn1_active.png" alt="" class="map1">
                <img src="./images/onephoto/zj/zj_btn2.png" alt="" class="map2">
                <img src="./images/onephoto/zj/zj_btn3.png" alt="" class="map3">
                <img src="./images/onephoto/zj/zj_btn4.png" alt="" class="map4">
            </div>
        </div>
        <div class="comMap" id="comMap_2">
            <img src="./images/onephoto/zj/zj_2.jpg" alt="" usemap="#Map2">
            <!-- <map name="Map2" id="Map2">
                <area shape="rect" coords="265,24,358,65"  href="javascript:;" class="map1"/>
                <area shape="rect" coords="365,19,447,65" href="javascript:;" class="map2"/>
                <area shape="rect" coords="454,18,551,65"  href="javascript:;" class="map3"/>
                <area shape="rect" coords="554,18,673,64"   href="javascript:;" class="map4"/>
            </map> -->
            <div class="zjBtns">
                <img src="./images/onephoto/zj/zj_btn1.png" alt="" class="map1">
                <img src="./images/onephoto/zj/zj_btn2_active.png" alt="" class="map2">
                <img src="./images/onephoto/zj/zj_btn3.png" alt="" class="map3">
                <img src="./images/onephoto/zj/zj_btn4.png" alt="" class="map4">
            </div>
        </div>
        <div class="comMap " id="comMap_3">
            <img src="./images/onephoto/zj/zj_3.jpg" alt="" usemap="#Map3">
            <!-- <map name="Map3" id="Map3">
               
                <area shape="rect" coords="265,24,358,65"  href="javascript:;" class="map1"/>
                <area shape="rect" coords="365,19,447,65" href="javascript:;" class="map2"/>
                <area shape="rect" coords="454,18,551,65"  href="javascript:;" class="map3"/>
                <area shape="rect" coords="554,18,673,64"   href="javascript:;" class="map4"/>
                <area shape="rect" coords="361,100,573,139" href="javascript:;" class="map5" />
                <area shape="rect" coords="604,100,810,140" href="javascript:;" class="map6" />
                <area shape="rect" coords="707,1056,820,1105" href="javascript:;" class="map7" />
            </map> -->
            <div class="zjBtns">
                <img src="./images/onephoto/zj/zj_btn1.png" alt="" class="map1">
                <img src="./images/onephoto/zj/zj_btn2.png" alt="" class="map2">
                <img src="./images/onephoto/zj/zj_btn3_active.png" alt="" class="map3">
                <img src="./images/onephoto/zj/zj_btn4.png" alt="" class="map4">
            </div>
        </div>
        <div class="comMap" id="comMap_4">
            <img src="./images/onephoto/zj/zj_4.jpg" alt="" usemap="#Map4">
            <!-- <map name="Map4" id="Map4">
                <area shape="rect" coords="272,2,361,37" href="javascript:;" class="map1" />
                <area shape="rect" coords="368,2,452,40" href="javascript:;" class="map2" />
                <area shape="rect" coords="461,-1,544,38" href="javascript:;" class="map3" />
                <area shape="rect" coords="555,-1,661,38" href="javascript:;" class="map4" />
                <area shape="rect" coords="1627,119,1669,147" href="javascript:;" class="map5" />
                <area shape="rect" coords="1708,120,1783,142" href="javascript:;" class="map6" />
                <area shape="rect" coords="1623,7,1722,43" href="javascript:;" class="map7" />
                <area shape="rect" coords="1746,4,1839,43" href="javascript:;" class="map8" />
            </map> -->
            <div class="zjBtns">
                <img src="./images/onephoto/zj/zj_btn1.png" alt="" class="map1">
                <img src="./images/onephoto/zj/zj_btn2.png" alt="" class="map2">
                <img src="./images/onephoto/zj/zj_btn3.png" alt="" class="map3">
                <img src="./images/onephoto/zj/zj_btn4_active.png" alt="" class="map4">
            </div>
        </div>
    </div>




    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/config.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="plugins/tableToExcel/tableToExcel.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript">


        layui.use(['tree', 'table'], function () {
            $ = layui.jquery;
            var tree = layui.tree;  //树形菜单

            //  选项卡
            var tabChangeFn = (function () {
                var spanIcon = $('.comIcon', '#chooseTab');
                var comLianWang = $('.comLianWang');
                spanIcon.each(function (i) {
                    $(this).click(function () {
                        spanIcon.removeClass('active');
                        comLianWang.hide();
                        comLianWang.eq(i).show();
                        $(this).addClass('active');
                        $('.dataWrap').hide();
                        treeFn('#treeW2');
                    })
                })
            })();
            // 生成数据报表点击事件
            var dataFn = (function () {
                var divIcon = $('#scsjbb');
                divIcon.click(function () {
                    $(this).toggleClass('active');
                })
            })();


            //生成数据

            var scDataFn = (function () {
                var dataBtn = $('.dataBtn');
                var comDataImg = $('.comDataImg');
                var dataWrap = $('.dataWrap');
                $('.scsjbb').click(function () {
                    dataWrap.show();
                })
                dataBtn.each(function (i) {
                    $(this).click(function () {
                        comDataImg.hide();
                        comDataImg.eq(i).show();
                    })
                });

                $('#closeData').click(function () {
                    dataWrap.hide();
                })
            })();
            //建筑类型选择
            // 消防物资选择

            var iFn = (function () {
                var iIcon = $('.iconfont');

                iIcon.each(function (i) {
                    // 判断是否需要全选与否
                    $(this).click(function () {
                        $(this).toggleClass('icon-duoxuan');
                        $(this).toggleClass('icon-duoxuankuang');
                        var jzIcon = $('.jz_content .iconfont');
                        var xfIcon = $('.iconAllXF .iconfont');
                        var isAllSelectJZ = [...jzIcon].every(function (item, i) {
                            return $(item).hasClass('icon-duoxuan')
                        });
                        var isAllSelectXF = [...xfIcon].every(function (item, i) {
                            return $(item).hasClass('icon-duoxuan')
                        });
                        if (isAllSelectJZ) {
                            $('.iconAllJZ').removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        } else {
                            $('.iconAllJZ').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        }
                        if (isAllSelectXF) {
                            $('.iconAllXF').removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        } else {
                            $('.iconAllXF').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        }
                    });

                });

                $(".iconAllJZ").click(function () {
                    if ($(this).hasClass('icon-duoxuankuang')) {
                        $(this).removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        $('.iconfont', '.jz_content').removeClass('icon-duoxuankuang').addClass('icon-duoxuan')
                    } else {
                        $(this).removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        $('.iconfont', '.jz_content').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                    }
                });
                $(".iconAllXF").click(function () {
                    if ($(this).hasClass('icon-duoxuankuang')) {
                        $(this).removeClass('icon-duoxuankuang').addClass('icon-duoxuan');
                        $('.iconfont', '.xf_content').removeClass('icon-duoxuankuang').addClass('icon-duoxuan')
                    } else {
                        $(this).removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                        $('.iconfont', '.xf_content').removeClass('icon-duoxuan').addClass('icon-duoxuankuang');
                    }
                })

            })();


            treeFn('#treeW');

            function treeFn(obj) {
                var inst1 = tree.render({
                    elem: obj, //绑定元素
                    showCheckbox: true,

                    data: [{
                        id: 1,
                        title: '张家口市',//一级菜单
                        spread: true,
                        children: [
                            {
                                id: '1_1',
                                title: '张家口供电公司'//二级菜单
                            },
                            {
                                id: '1_2',
                                title: '中保大厦'
                            },
                            {
                            id: '1_3',
                            title: '北站建行'
                            },
                            {
                            id: '1_4',
                            title: '宝善街建行'
                            },
                            {
                            id: '1_5',
                            title: '明德南建行'
                            },
                            {
                            id: '1_6',
                            title: '建行档案馆'
                            },
                            {
                            id: '1_7',
                            title: '附属医院'
                            },
                            {
                            id: '1_8',
                            title: '铁建联创大厦'
                            },
                            {
                            id: '1_9',
                            title: '烟厂厂区'
                            },
                            {
                            id: '1_10',
                            title: '烟厂库区'
                            },
                            {
                            id: '1_11',
                            title: '大德商务会馆'
                            },
                            {
                            id: '1_12',
                            title: '农村信用联社'
                            },
                            {
                            id: '1_13',
                            title: '市政府'
                            }
                        ]
                    },
                    {
                        id: 2,
                        title: '宣化县' //一级菜单
                        ,
                        children: [
                            {
                                id: '2_1',
                                title: '水库' //二级菜单
                            },
                            {
                                id: '2_2',
                                title: '学校' //二级菜单
                            },
                            {
                                id: '2_3',
                                title: '小区' //二级菜单
                            },
                            {
                                id: '2_3',
                                title: '写字楼' //二级菜单
                            }
                        ]
                    },
                    {
                        id: 3,
                        title: '张北县' //一级菜单
                        ,
                        children: [
                            {
                                id: '3_1',
                                title: '第一中队' //二级菜单
                            },
                            {
                                id: '3_2',
                                title: '第二中队' //二级菜单
                            }

                        ]
                    },
                    {
                        id: 4,
                        title: '下花园区' //一级菜单
                        ,
                        children: [
                            {
                                id: '1_3',
                                title: '酒店',//二级菜单
                                children: [
                                    {
                                        id: '1_3_1',
                                        title: '凯宾斯基大酒店' //三级菜单
                                    },
                                    {
                                        id: '1_3_2',
                                        title: '盘龙大酒店' //三级菜单
                                    }
                                ]
                            },
                            {
                                id: '1_4',
                                title: '加油站' //二级菜单
                            }

                        ]
                    }
                    ],
                    oncheck: function (obj) { //点击复选框时触发
                        console.log('obj', obj);
                    },
                    click: function (obj) { // 在节点被点击后触发
                        console.log('obj', obj);
                    },
                    operate: function (obj) {//添加删除了才会触发这个回调
                        console.log('operate', obj);
                    }
                });
            }
            /*** 点击出现一般单位出现页面 ****/

            $('.smallSlice').click(function () {
                var w = $(window).width();
                var h = $(window).height();
                window._EditFrameIndex = x_admin_show('', './jk_video.html', w, h);
            });

            /*****************设备分布 *********************/

            var xiaofangFn = (function () {
                var xiaofang = $('.xiaofang');
                var onOff = true;
                var sbOnOff = true
                xiaofang.click(function () {
                    if (onOff) {
                        $('#xiaofangShow ').css({
                            right: 0
                        })
                    } else {
                        $('#xiaofangShow ').css({
                            right: -524
                        })
                    }
                    onOff = !onOff;
                });


                $('#shebeiBtn').click(function () {

                    if (sbOnOff) {
                        $('#tableShow').css({
                            right: 0
                        })
                    } else {
                        $('#tableShow').css({
                            right: -488
                        })
                    }
                    sbOnOff = !sbOnOff;
                });

                $('#videoBtn').click(function () {
                    $('#videoshow').css({
                        top: 100
                    })
                })
                $('#videoshow').click(function () {
                    $('#videoshow').css({
                        top: -800
                    })
                })

            })();


            /*********** 专家分布 ************/

            var mapHotFn = (function () {
                var comMap = $('.comMap');

                $('.map1').click(function () {
                    comMap.hide();

                    $('#comMap_1').show();
                });
                $('.map2').click(function () {
                    comMap.hide();
                    $('#comMap_2').show();
                })
                $('.map3').click(function () {
                    comMap.hide();
                    $('#comMap_3').show();
                })
                $('.map4').click(function () {
                    comMap.hide();
                    $('#comMap_4').show();
                })
            })()

        });

    </script>
</body>

</html>